<template>
  <div :class="wrapClass" style="width: 100%; height: 100%" :id="id"></div>
</template>

<script>
import { COLORS } from "@/constants";
import mixins from "./mixins";
export default {
  name: "defaultbar",
  mixins: [mixins],
  props: {
    id: {
      type: String,
      default: "",
    },
    wrapClass: String,
    option: {
      type: Object,
      default: () => {},
    },
    legend: {
      type: Array,
      default: () => [],
    },
    yLabel: {
      type: Array,
      default: () => [],
    },
    yData: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    getDefOptions() {
      const geneteYData = () => {
        const series = [];
        this.yData.forEach((item) => {
          series.push({
            name: item.name,
            type: "bar",
            legendHoverLink: false,
            barCategoryGap: "40%",
            label: {
              show: "true",
              position: "right",
              textStyle: {
                color: "white",
                fontSize: 14,
              },
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    "#E69C2E",
                    "#AB57FF",
                    "#04D1B2",
                    "#FF6666",
                    "#5673FF",
                  ];
                  return colorList[params.dataIndex];
                },
                //鼠标悬停时：
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.9)",
                },
              },
            },
            data: item.value,
          });
        });
        return series;
      };
      const defOption = {
        color: COLORS,
        grid: { //外层位置
          left: "0",
          top: "20",
          right: "30",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: { 
          type: "value",
          max: 1,
          splitLine: {  //图内刻度线样式
            lineStyle:{
              type:'dashed',
              color:'#2C2D33'
            }
          },
          axisTick:{ 
            show:false
          },
        },
        tooltip: { triggerOn: "mousemove" },
        yAxis: {
          type: "category",
          splitLine: {
            show: false,
          },
          axisTick:{
            show:false
          },
          axisLabel:{
            padding:[0,15,0,0]
          },
          data: this.yLabel,
        },
        textStyle: {
          color: "#767E91",
          fontSize: 12,
        },
        series: geneteYData(),
      };
      return Object.assign({}, defOption, this.option);
    },
  },
  mounted() {
    const options = this.getDefOptions;
    if (options) {
      this.myCharts = this.$echarts.init(document.getElementById(this.id));
      this.myCharts.setOption(options);
      this.handleResize(this.myCharts);
    }
  },
  watch: {
    getDefOptions: {
      handler: function (nval) {
        this.myCharts.setOption(nval);
      },
      deep: true,
    },
  },

  methods: {},
};
</script>
